<template>
  <div class="list" ref="wrapper">
    <div>
			<div class="present-area">
				<div class="present-title" ref="present">当前</div>
				<div class="present-button">{{this.city}}</div>
			</div>
			<div class="hot-area">
				<div class="hot-title" ref="present2">热门城市</div>
				<div class="hot-list">
					<div 
						class="hot-button"
						v-for="item of hotCities"
						:key="item.id"        
					>{{item.name}}</div>
				</div>
			</div>
			<div class="alph-area">
				<div 
					class="alph-wrapper"
					v-for="(item,key) of cities"
					:key="key"
					:ref="key"
				>
					<div class="alph-title">{{key}}</div>
					<div class="alph-list">
						<div 
							class="alph-button border-bottom"
							v-for="innerItem of item"
							:key="innerItem.id"
						>{{innerItem.name}}</div>
					</div>
				</div>
			</div>
		</div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
// import BMap from 'BMap'
export default {
  name: 'locationList',
  props:{
	  letter:String,
	  cities:Object,
	  hotCities:Array
  },
  watch:{
	  letter(){
		  // console.log(this.letter)
		  const elementletter = this.$refs[this.letter]
		  const elementPresent = this.$refs.present
		  if(elementletter){
			  const element = elementletter[0]
			  this.scroll.scrollToElement(element)
		  }else{
			  this.scroll.scrollToElement(elementPresent)
		  }
	  }
  },
  data(){
		return {
			city:'',
			// cities:{
			// 	"A":[
			// 		{
			// 			id:'000011',
			// 			name:'安庆'
			// 		},
			// 		{
			// 			id:'000012',
			// 			name:'安阳'
			// 		},
			// 		{
			// 			id:'000013',
			// 			name:'安一'
			// 		}
			// 	],
			// 	"B":[
			// 		{
			// 			id:'000011',
			// 			name:'B安庆'
			// 		},
			// 		{
			// 			id:'000012',
			// 			name:'B安阳'
			// 		},
			// 		{
			// 			id:'000013',
			// 			name:'B安一'
			// 		}
			// 	],
			// 	"C":[
			// 		{
			// 			id:'000011',
			// 			name:'C安庆'
			// 		},
			// 		{
			// 			id:'000012',
			// 			name:'C安阳'
			// 		},
			// 		{
			// 			id:'000013',
			// 			name:'C安一'
			// 		}
			// 	],
			// 	"D":[
			// 		{
			// 			id:'000011',
			// 			name:'C安庆'
			// 		},
			// 		{
			// 			id:'000012',
			// 			name:'C安阳'
			// 		},
			// 		{
			// 			id:'000013',
			// 			name:'C安一'
			// 		}
			// 	],
			// 	"E":[
			// 		{
			// 			id:'000011',
			// 			name:'C安庆'
			// 		},
			// 		{
			// 			id:'000012',
			// 			name:'C安阳'
			// 		},
			// 		{
			// 			id:'000013',
			// 			name:'C安一'
			// 		}
			// 	],
			// 	"F":[
			// 		{
			// 			id:'000011',
			// 			name:'C安庆'
			// 		},
			// 		{
			// 			id:'000012',
			// 			name:'C安阳'
			// 		},
			// 		{
			// 			id:'000013',
			// 			name:'C安一'
			// 		}
			// 	],
			// 	"G":[
			// 		{
			// 			id:'000011',
			// 			name:'C安庆'
			// 		},
			// 		{
			// 			id:'000012',
			// 			name:'C安阳'
			// 		},
			// 		{
			// 			id:'000013',
			// 			name:'C安一'
			// 		},
			// 		{
			// 			id:'0000114',
			// 			name:'C安庆'
			// 		},
			// 		{
			// 			id:'0000125',
			// 			name:'C安阳'
			// 		},
			// 		{
			// 			id:'0000136',
			// 			name:'C安一'
			// 		},
			// 		{
			// 			id:'0000117',
			// 			name:'C安庆'
			// 		},
			// 		{
			// 			id:'0000128',
			// 			name:'C安阳'
			// 		},
			// 		{
			// 			id:'0000139',
			// 			name:'C安一'
			// 		},
			// 	]
			// },
			// hotCities:[
			// 	{
			// 		id:'00001',
			// 		name:'北京'
			// 	},
			// 	{
			// 			id:'00002',
			// 			name:'北京'
			// 	},
			// 	{
			// 			id:'00003',
			// 		  name:'北京'					
			// 	},
			// 	{
			// 		id:'000021',
			// 		name:'北京'
			// 	},
			// 	{
			// 			id:'000022',
			// 			name:'北京'
			// 	},
			// 	{
			// 			id:'000033',
			// 		  name:'北京'					
			// 	}
			// ]
		}  
  },
  mounted(){
    this.scroll = new BScroll(this.$refs.wrapper,{
      click:true,
      mouseWheel:{
        speed:20,
        invert:false,
        easeTime:300
      }
    })
	
	// let map = new BMap.Map('allmap')
	// let myCity = new BMap.localCity()
	// myCity.get((result) => {
	// 	if(result){
	// 		this.city = result.name			
	// 	}else {
	// 		this.city = '正在获取位置信息'			
	// 	}
	// })	
  }  
}
</script>

<style lang="stylus" scoped>
.border-bottom
  &:before
    border:.04rem solid #ccc
.list
  overflow:hidden
  background:#e9ecf1
  position:absolute
  top:1.12rem
  left:0
  bottom:0
  width:100%
  z-index:1
  .hot-list
    overflow:hidden
  .present-title,.hot-title,.alph-title
    margin-left:.4rem
    padding:.4rem 0
  .hot-title
    margin-bottom:-.3rem
  .present-button,.hot-button,.alph-button
    line-height:.44rem
    padding:.2rem .2rem
    background:#fff
  .present-button
    width:84%
    margin-left:.2rem
  .hot-button
    width:15%
    float:left
    margin-left:.2rem
    text-align:center
    margin-top:.2rem
  .alph-button
    width:100%
    padding-left:.4rem
</style>
